<template>
    <el-dialog :title="isEdit?'编辑堆场策划':'新增堆场策划'" :visible.sync="dialogForm" width="1100px">
        <div style="display:flex">
            <el-card class="box-card">
                <div v-for="(item,index) in planType" :key="index" class="text item">
                    <el-button @click="handleSelectType(item,index)" :class="selectBtn===index?'select-btn':''">{{item.typeName}}</el-button>
                </div>
            </el-card>
            <el-form :inline="true" ref="form" :model="form" :rules="rules" class="add-form" label-width="110px">
                <el-row>
                    <el-col :span="8" style="width:200px;margin-bottom:10px">
                        <el-button type="primary" @click="handleAdd">新 增</el-button>
                        <!-- <el-button type="primary" @click="handleRemove">删 除</el-button> -->
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-table :data="form.containerYardStackPlan" style="width:850px" border stripe max-height="500">
                            <el-table-column v-for="(item,index) in attr"
                                             :key="index"
                                             :prop="item.attrCode"
                                             :label="item.attrName"
                                              min-width="220">
                                <template slot-scope="scope">
                                    <div style="display:flex">
                                        <el-select
                                                v-model="form.containerYardStackPlan[scope.$index].containerYardStackPlanFactor[index].operator"
                                                @change="v=>handelOperator(item,index,scope.$index,v)"
                                                placeholder="请选择">
                                            <el-option v-for="[key, val] in _dictOperatorTwoType" :key="key" :label="val" :value="key"></el-option>
                                        </el-select>
                                        <!-- 计划类型 -->
                                        <el-select v-if="item.attrCode==='planType'"
                                                v-model="form.containerYardStackPlan[scope.$index].containerYardStackPlanFactor[index].attrVal"
                                                @change="v=>handelAttr(item,index,scope.$index,v)"
                                                placeholder="请选择" clearable>
                                            <el-option v-for="[key, val] in _dictPlanType" :key="key" :label="val" :value="key"></el-option>
                                        </el-select>
                                        <!-- 空重 -->
                                        <el-select v-if="item.attrCode==='ifHeavy'"
                                                v-model="form.containerYardStackPlan[scope.$index].containerYardStackPlanFactor[index].attrVal"
                                                @change="v=>handelAttr(item,index,scope.$index,v)"
                                                placeholder="请选择" clearable>
                                            <el-option v-for="[key, val] in _dictIfHeavyType" :key="key" :label="val" :value="key"></el-option>
                                        </el-select>
                                        <!-- 进出口 -->
                                        <el-select v-if="item.attrCode==='importAndExport'"
                                                v-model="form.containerYardStackPlan[scope.$index].containerYardStackPlanFactor[index].attrVal"
                                                @change="v=>handelAttr(item,index,scope.$index,v)"
                                                placeholder="请选择" clearable>
                                            <el-option v-for="[key, val] in _dictImportAndExportType" :key="key" :label="val" :value="key"></el-option>
                                        </el-select>
                                        <!-- 尺寸 -->
                                        <auto-search-size v-if="item.attrCode==='containerSize'"
                                                        @matchRecord="v=>handelAttr(item,index,scope.$index,v.containerSize)"
                                                        :name="form.containerYardStackPlan[scope.$index].containerYardStackPlanFactor[index].attrVal"></auto-search-size>
                                        <!-- 货名 -->
                                        <el-input v-if="item.attrCode==='cargoName'"
                                                @change="v=>handelAttr(item,index,scope.$index,v)"
                                                v-model="form.containerYardStackPlan[scope.$index].containerYardStackPlanFactor[index].attrVal"></el-input>
                                        <!-- 箱型 -->
                                        <auto-search-entrust v-if="item.attrCode==='containerType'"
                                                            @matchRecord="v=>handelAttr(item,index,scope.$index,v.containerType)"
                                                            :name="form.containerYardStackPlan[scope.$index].containerYardStackPlanFactor[index].attrVal"></auto-search-entrust>
                                        <!-- 发站 -->
                                        <auto-search-port-station v-if="item.attrCode==='stratStationCode'"
                                                                @matchRecord="v=>handelAttr(item,index,scope.$index,v.pasCode,v.pasName)"
                                                                :name="form.containerYardStackPlan[scope.$index].containerYardStackPlanFactor[index].attrValName"></auto-search-port-station>
                                        <!-- 到站 -->
                                        <auto-search-port-station v-if="item.attrCode==='endStationCode'"
                                                                @matchRecord="v=>handelAttr(item,index,scope.$index,v.pasCode,v.pasName)"
                                                                :name="form.containerYardStackPlan[scope.$index].containerYardStackPlanFactor[index].attrValName"></auto-search-port-station>
                                        <!-- 运输方式 -->
                                        <el-select v-if="item.attrCode==='transportMode'"
                                                v-model="form.containerYardStackPlan[scope.$index].containerYardStackPlanFactor[index].attrVal"
                                                @change="v=>handelAttr(item,index,scope.$index,v)"
                                                placeholder="请选择" clearable>
                                            <el-option v-for="[key, val] in _dictTransportModeType" :key="key" :label="val" :value="key"></el-option>
                                        </el-select>
                                        <!-- 内外贸 -->
                                        <el-select v-if="item.attrCode==='tradeType'"
                                                v-model="form.containerYardStackPlan[scope.$index].containerYardStackPlanFactor[index].attrVal"
                                                @change="v=>handelAttr(item,index,scope.$index,v)"
                                                placeholder="请选择" clearable>
                                            <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val" :value="key"></el-option>
                                        </el-select>
                                        <!-- 有无委托 -->
                                        <el-select v-if="item.attrCode==='entrustNo'"
                                                v-model="form.containerYardStackPlan[scope.$index].containerYardStackPlanFactor[index].attrVal"
                                                @change="v=>handelAttr(item,index,scope.$index,v)"
                                                placeholder="请选择" clearable>
                                            <el-option v-for="[key, val] in _dictEntrustNoType" :key="key" :label="val" :value="key"></el-option>
                                        </el-select>
                                        <!--箱号-->
                                        <el-input v-if="item.attrCode==='containerNo'"
                                                  @change="v=>handelAttr(item,index,scope.$index,v)"
                                                  v-model="form.containerYardStackPlan[scope.$index].containerYardStackPlanFactor[index].attrVal"></el-input>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="priority" label="优先级"  min-width="120">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.priority" placeholder="请选择" clearable>
                                        <el-option v-for="[key, val] in _dictPriorityType" :key="key" :label="val" :value="key"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="areaNo" label="场区"  min-width="140">
                                <template slot-scope="scope">
                                    <auto-search-area-no @matchRecord="v=>handleSelectArea(v,scope.$index)" :name="scope.row.areaNo"></auto-search-area-no>
                                </template>
                            </el-table-column>
                            <el-table-column prop="startBay" label="开始贝"  min-width="100">
                                <template slot-scope="scope">
                                    <el-input style="width: 78px" v-model="scope.row.startBay" @blur="handleBR(scope.$index,scope.row.startBay,'bay','startBay')" :disabled="virtual||!scope.row.areaNo"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="endBay" label="结束贝"  min-width="100">
                                <template slot-scope="scope">
                                    <el-input style="width: 78px" v-model="scope.row.endBay" @blur="handleBR(scope.$index,scope.row.endBay,'bay','endBay')" :disabled="virtual||!scope.row.areaNo"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="startRow" label="开始排"  min-width="100">
                                <template slot-scope="scope">
                                    <el-input style="width: 78px" v-model="scope.row.startRow" @blur="handleBR(scope.$index,scope.row.startRow,'row','startRow')" :disabled="virtual||!scope.row.areaNo"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="endRow" label="结束排"  min-width="100">
                                <template slot-scope="scope">
                                    <el-input style="width: 78px" v-model="scope.row.endRow" @blur="handleBR(scope.$index,scope.row.endRow,'row','endRow')" :disabled="virtual||!scope.row.areaNo"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="totalTeu" label="总箱位"  min-width="100">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.totalTeu" :disabled="true"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="usedTeu" label="已用箱位"  min-width="115">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.usedTeu" :disabled="true"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="limitedTeu" label="受限箱位"  min-width="115">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.limitedTeu" :disabled="true"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="enabledTeu" label="可用箱位"  min-width="115">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.enabledTeu" :disabled="true"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" align="center" label="操作" width="80">
                                <template slot-scope="scope">
                                    <el-button type="text" class="danger" size="small" @click="handleRemove(scope.$index)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">保 存</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {
        updateYardStackPlan,
        getYardPlanTypeList,
        getYardStackPlan
    } from "@/api/yardPlan/yardPlan";
    import autoSearchAreaNo from '@/components/autocomplete/autoSearchAreaNo'
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import autoSearchEntrust from '@/components/autocomplete/autoSearchEntrust'
    import autoSearchPortStation from '@/components/autocomplete/autoSearchPortStation'
    import {REG_NUMBER} from "@/utils/Reg";

    export default {
        name: "yardStackPlanForm",
        components: {autoSearchAreaNo,autoSearchSize,autoSearchEntrust,autoSearchPortStation},
        data() {
            return {
                form: {
                    containerYardStackPlan:[],
                },
                rules: {},
                dialogForm: false,
                isEdit: true,
                planType: [],
                attr:[{attrName:'',attrCode:'',attrVal:''}],
                attrs:[{attrName:'',attrCode:'',attrVal:''}],
                virtual:false,
                id:'',
                selectBtn:null,
            }
        },
        mounted() {
            this.loadData()
        },
        methods: {
            loadData() {
                getYardPlanTypeList().then(res => {
                    this.planType = res.data.aaData
                })
            },
            clearForm() {
                return {
                    yardPlanTypeName: "",
                    yardPlanTypeId: "",
                    orgId: "",
                    orgName: "",
                    deptId: "",
                    deptName: "",
                    containerYardStackPlan: [{
                        containerYardStackPlanFactor: [...JSON.parse(JSON.stringify(this.attrs))],
                        principleName: '',
                        priority: "",
                        areaId: "",
                        areaNo: "",
                        startBay: "",
                        endBay: "",
                        startRow: "",
                        endRow: "",
                        totalTeu: "",
                        usedTeu: "",
                        limitedTeu: "",
                        enabledTeu: "",
                    }],
                }
            },
            // 保存
            handleSubmit() {
                console.log(this.form.containerYardStackPlan);
                let form=this.form.containerYardStackPlan
                for (let i = 0; i < form.length; i++) {
                    if(!form[i].areaId||!form[i].areaNo){
                        this.$message({ message: '请选择场区',type: 'error'})
                        return
                    }
                    if(!form[i].priority){
                        this.$message({ message: '请选择优先级',type: 'error'})
                        return
                    }
                }
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.isEdit ? this.handleToEdit() : this.handleToAdd()
                    } else {
                        this.$message({
                            message: '请检查表单',
                            type: 'error'
                        })
                    }
                })
            },
            // 新增
            handleToAdd() {
                addYardStackPlan(this.form).then(res => {
                    this.$message({
                        message: '新增成功!',
                        type: 'success'
                    })
                    // this.dialogForm = false
                    this.$emit('load')
                })
            },
            // 编辑
            handleToEdit() {
                updateYardStackPlan(this.id, this.form).then(res => {
                    this.$message({
                        message: '编辑成功!',
                        type: 'success'
                    })
                    // this.dialogForm = false
                    this.$emit('load')
                })
            },
            handleRemove(index) {
                this.form.containerYardStackPlan.splice(index, 1)
            },
            handleAdd(index) {
                if(this.id){
                    console.log(this.form);
                    this.form.containerYardStackPlan.push({
                        priority: '',
                        areaNo: '',
                        areaId: '',
                        startBay: '',
                        endBay: '',
                        startRow: '',
                        endRow: '',
                        totalTeu: '',
                        usedTeu: '',
                        limitedTeu: '',
                        enabledTeu: '',
                        containerYardStackPlanFactor:[...JSON.parse(JSON.stringify(this.attrs))]
                    })
                }else{
                    this.$message({
                        message: '请先选择一条策划类型!',
                        type: 'error'
                    })
                }

            },
            handleSelectArea(item,index){
                this.form.containerYardStackPlan[index].maxBay=item.maxBay
                this.form.containerYardStackPlan[index].maxRow=item.maxRow
                this.form.containerYardStackPlan[index].areaNo=item.areaNo
                this.form.containerYardStackPlan[index].areaId=item.id
                this.form.containerYardStackPlan[index].totalTeu=item.totalTeu
                this.form.containerYardStackPlan[index].usedTeu=item.disenabledTeu
                this.form.containerYardStackPlan[index].limitedTeu=item.controlfieldTeu
                this.form.containerYardStackPlan[index].enabledTeu=item.enabledTeu

            },
            handleBR(index,val,type,name){
                let num=0
                console.log(this.form.containerYardStackPlan);
                console.log(index);
                console.log(this.form.containerYardStackPlan[index]);
                if(type==='bay'){
                    if(REG_NUMBER.test(val)){
                        if(val>this.form.containerYardStackPlan[index].maxBay){
                            val=this.form.containerYardStackPlan[index].maxBay
                        }
                        if(val>0&&val<10){
                            this.form.containerYardStackPlan[index][name]='0'+Number(val)
                        }else{
                            this.form.containerYardStackPlan[index][name]=val
                        }
                    }else{
                        this.form.containerYardStackPlan[index][name]=''

                    }
                    console.log(this.form.containerYardStackPlan[index][name]);
                }else{
                    if(REG_NUMBER.test(val)){
                        if(val>this.form.containerYardStackPlan[index].maxRow){
                            val=this.form.containerYardStackPlan[index].maxRow
                        }
                        if(val>0&&val<10){
                            this.form.containerYardStackPlan[index][name]='0'+Number(val)
                        }else{
                            this.form.containerYardStackPlan[index][name]=val
                        }
                    }else{
                        this.form.containerYardStackPlan[index][name]=''
                    }
                    console.log(this.form.containerYardStackPlan[index][name]);
                }
            },
            handleSelectType(item,index){
                this.attr=[]
                let params={
                    search_EQ_yardPlanTypeId:item.id
                }
                this.id=item.id
                this.selectBtn=index
                getYardStackPlan(item.id).then(res=>{
                    if(res.data){
                        let data=JSON.parse(JSON.stringify(res.data))
                        let attr=JSON.parse(JSON.stringify(res.data.containerYardStackPlan))
                        this.form=data
                        this.attr=attr[0].containerYardStackPlanFactor
                        let attrs=JSON.parse(JSON.stringify(attr[0].containerYardStackPlanFactor))
                        for (let i = 0; i < attrs.length; i++) {
                            attrs[i].attrVal=''
                            attrs[i].attrValName=''
                        }
                        this.attrs=attrs
                    }else{
                        this.form.containerYardStackPlan.splice(0,this.form.containerYardStackPlan.length)
                        let Principle=item.containerYardStackPrinciple
                        console.log(item);
                        let attr=[]
                        for (let i = 0; i < Principle.length; i++) {
                            attr[i]={
                                attrName:Principle[i].principleName,
                                attrCode:Principle[i].principleCode,
                                attrVal:'',
                            }
                        }
                        this.attr=JSON.parse(JSON.stringify(attr))
                        this.attrs=JSON.parse(JSON.stringify(attr))
                        console.log(attr)
                    }
                })
            },
            handelAttr(item,i,index,v,name=''){
                console.log(item,i,index,v)
                let newItem=JSON.parse(JSON.stringify(item))
                let params={
                    ...this.form.containerYardStackPlan[index].containerYardStackPlanFactor[i],
                    attrName:newItem.attrName,
                    attrCode:newItem.attrCode,
                    attrVal:v,
                    attrValName:name
                }
                // this.form.containerYardStackPlan[index].containerYardStackPlanFactor[i]=params
                this.form.containerYardStackPlan[index].containerYardStackPlanFactor.splice(i,1,params)
                // this.form.containerYardStackPlan[index].containerYardStackPlanFactor[i].attrName=item.attrName
                // this.form.containerYardStackPlan[index].containerYardStackPlanFactor[i].attrCode=item.attrCode
                // this.form.containerYardStackPlan[index].containerYardStackPlanFactor[i].attrVal=JSON.parse(JSON.stringify(item.attrVal))
            },
            handelOperator(item,i,index,v,name=''){
                let newItem=JSON.parse(JSON.stringify(item))
                let params={
                    ...this.form.containerYardStackPlan[index].containerYardStackPlanFactor[i],
                    operator:v
                }
                this.form.containerYardStackPlan[index].containerYardStackPlanFactor.splice(i,1,params)
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$refs.form.resetFields()
                    this.isEdit = true
                    this.id=""
                    this.form = {
                        containerYardStackPlan:[]
                    }
                    this.$emit('clear')
                }
            },
        },
    }

</script>

<style scoped>
    .box-card {
        width: 200px;
        margin-right: 10px
    }

    .item {
        padding: 10px 0;
        /*cursor: pointer;*/
    }
    .select-btn{
        color: #409EFF;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
    }
</style>
